<template>
  <div>
    <el-container class="container">
      <!-- width�Ŀ��ȸ�collapseһ����̬���� width="collapse"-->
      <el-aside :class="{aside_main_show:!isCollapse}" class="el-aside-vertical">
        <div class="firstview">
          <CatalogueSelect></CatalogueSelect>
          <div class="content">
            <div>

            </div>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div :title="isCollapse ? '展开目录 ': '收起目录'" class="box_bgd" @click="isC">

            <i v-if="box_bgd" :class="isCollapse ">
              <i class="el-icon-s-fold" style="font-size:30px"></i>
            </i>
            <i v-else :class="isCollapse ">
              <i class="el-icon-s-unfold" style="font-size:30px"></i>
            </i>
          </div>
        </el-header>
        <el-main>

        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>

import CatalogueSelect from '@/components/NavMenu/CatalogueSelect'

export default {
  components: {
    CatalogueSelect
  },
  data() {
    return {
      isCollapse: false, //
      box_bgd: false
    }
  },
  methods: {
    // ��̬����չ����������л���Ӧͼ��
    isC() {
      this.isCollapse = !this.isCollapse

      if (this.isCollapse) {
        setTimeout(() => {
          this.box_bgd = true
        }, 500)
      } else {
        setTimeout(() => {
          this.box_bgd = false
        }, 500)
      }
    }
  }
}
</script>

  <style scoped>
  .container{
    float: left;
  }
  .el-header {
    background: #ffffff;
    color: rgb(161, 0, 0);
    height: 2px;
    padding: 0 !important;
  }

  .el-aside {
    background: #fdfbfb;
    color: rgb(39, 39, 39);
    height: 100vh;
  }
  .el-menu {
    border-right-width: 0;
  }
  .el-main {
    color: rgba(39, 39, 39, 0.3);
  }

  .el-aside-vertical{
    width: 900px ;
    transition: width 0.5s;
  }

  .aside_main_show{
    width: 0px !important;
  }

  .box_bgd {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .box_bgd i {
    font-size: 20px;
  }
  .box_bgd:hover {
    background: rgb(203, 215, 230);
  }

  .firstview{
    position:relative;
    top:20px;
    left:10px;

  }
  .content{
    margin-top: 20px;
    margin-left: 5px;
    font-size: 1rem;
    line-height: 2rem;
  }
  </style>
